$(function() {

	var box1 = document.querySelector('.max-nav-left');
	var box0 = document.querySelector('.max-top-t');
	// 小盒子名字
	var mask = document.querySelector('.min-mask');


	var box2 = document.querySelector('.max-mask');
	var datu = document.querySelector('.max-tu');
	box0.onmouseover = function() {
		mask.style.display = 'block';
		box2.style.display = 'block';
	}
	box0.onmouseout = function() {
		mask.style.display = 'none';
		box2.style.display = 'none';
	}
	box0.onmousemove = function(e) {
		// console.log(e.pageX, e.pageY);
		//a b表示当前鼠标在盒子里的位置, 
		// 想要把谁移动就给谁他爹加相对,给他加绝对
		var a = e.pageX - box1.offsetLeft;
		var b = e.pageY - box1.offsetTop;
		
		// console.log(box1.offsetLeft, box1.offsetTop);
		// masktop maskleft表示在减去盒子宽高的一半
		var maskLeft = a - mask.offsetWidth / 2;
		var maskTop = b - mask.offsetHeight / 2;
		
		// mask.style.top = maskTop + 'px';
		// mask.style.left = maskLeft + 'px';
		//最大偏移量
		var maxLeft = box0.offsetWidth - mask.offsetWidth;
		var maxTop = box0.offsetHeight - mask.offsetHeight;
		if (maskLeft < 0) {
			maskLeft = 0
		}
		if (maskLeft > maxLeft) {
			maskLeft = maxLeft
		}
		if (maskTop < 0) {
			maskTop = 0
		}
		if (maskTop > maxTop) {
			maskTop = maxTop
		}
		mask.style.top = maskTop + 'px';
		mask.style.left = maskLeft + 'px';

		var dTLeft = box2.offsetWidth - datu.offsetWidth;
		var dTTop = box2.offsetHeight - datu.offsetHeight;

		// 3 大图片跟随蒙版移动
		datu.style.top = maskTop * dTTop / maxTop + 'px';
		datu.style.left = maskLeft * dTLeft / maxLeft + 'px';
	}
})
